<template>
  <div class="app-container" style="background-color: #fff; margin: 20px 40px">
    <div class="personal-from2">
      <wise-form :columns="formItems" :loading="loading" :old-object="user" @on-submit="submitHandle" />
    </div>
  </div>
</template>

<script>
  import {
    getInfo
  } from '@/api/user'
  import WiseForm from '@/components/Crud/Form/wiseForm'
  import {
    postHandle
  } from '@/api'

  export default {
    name: 'Profile',
    components: {
      WiseForm
    },
    data() {
      return {
        user: {},
        loading: false,
        formItems: [{
            prop: 'picture',
            type: 'file',
            rules: [{
              required: true,
              message: '请选择个人头像',
              trigger: 'change'
            }],
            use: ['table', 'add', 'view', 'edit', 'search']
          },
          {
            label: '真实姓名',
            prop: 'username',
            type: 'text',
            labelWidth: '120px',
            maxlength: 20,
            rules: [{
                required: true,
                message: '请输入真实姓名',
                trigger: 'blur'
              },
              {
                min: 2,
                max: 20,
                message: '长度在 2 到 20 个字符',
                trigger: 'blur'
              }
            ],
            placeholder: '请输入名称',
            use: ['table', 'add', 'show', 'edit', 'search']
          },
          {
            label: '联系方式',
            prop: 'phone',
            type: 'text',
            labelWidth: '120px',
            maxlength: 11,
            rules: [{
              required: true,
              message: '请输入联系方式',
              trigger: 'blur'
            }],
            placeholder: '请输入联系方式',
            use: ['table', 'add', 'show', 'edit', 'search']
          }
        ]
      }
    },
    computed: {
      userId() {
        return this.$store.state.user.userId
      }
    },
    created() {
      this.getUser()
    },
    methods: {
      getUser() {
        getInfo(this.userId).then(res => {
          this.user = res.result
        })
      },
      submitHandle(obj) {
        postHandle('/api/v1/welder-uac-second/user-information-comb/update-user-info/' + obj.id, {
          obj
        }).then(response => {
          this.$message('操作成功')
          this.loading = false
          this.$store.dispatch('user/getInfo')
        }).catch(error => {
          console.error(error)
          this.loading = false
          this.$message.error('操作失败')
        })
      }
    }
  }
</script>